/*
    JSPWiki - a JSP-based WikiWiki clone.

    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); fyou may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
*/
/*
Section: Main Content

    Uses a minimal grid-system to display/hide the sidebar left from the main page container.
    The sidebar slides in/out at the left, via a css transition, by adding/removing
    .active to the main content container. (adding .active, makes the sidebar visible)

    The div.page element comes first in the DOM tree, before the div.sidebar.

    TODO: [stack sidebar ico small devices]

DOM Structure:
(start code)
    div.content[.active]
        div.page
        	div.page-content
        	div.page-footer
        div.sidebar
(end)
*/

.content {
    /* position:relative;  => dont, otherwise suggestion dialogs are clipped */
    padding: 0;
    overflow:hidden; //checkme
    clear:both;
    .hyphens(auto);

    background: @wiki-page-bg;  //page background color
    position: relative;  //prepare for the :after element to give the sidebar another color

	&:after {
	    content: " ";
    	position: absolute;
    	top: 0;
    	left: 0;
    	bottom: 0;
	    background: @wiki-sidebar-bg;
	}
	//by default,  sidebar, and sidebar background color are hidden  (margin-left=-100%;)
	.sidebar, &:after {
	    width: @wiki-sidebar-width;
    	margin-left: -100%;
    	.transition (all .3s);
	}
}
.page {
    float:right;
    width:100%;
   .transition(all .3s);
}
.sidebar {
    position: relative;
    float: left;
    z-index: 1;  //on top of the content:after element !
    min-height: 1px; // Prevent columns from collapsing when empty
    padding: @padding-base-horizontal (@grid-gutter-width / 2);
    overflow-x:hidden;
}
//show the sidebar
.content.active {
    .page { width: 100% - @wiki-sidebar-width; }
    .sidebar, &:after { margin-left:0; }
}

/*
Show/hide panels of sidebar.
*/
.stacked-sidemenu {
	display: none;
}
.stacked-sidemenu.active {
	display: inherit;
}
.stacked-pages {
	display: none;
}
.stacked-pages.active {
	display: inherit;
}

/*:FVK: workaround.*/
.scope-set { display: none; }
.scope-set.active { display: inherit; }
.scope-select { display: none; }
.scope-select.active { display: inherit; }	

/*
Put sidebar at the right side
- FFS: also move toggle buttons to other side ?
*/
.fav-right {
    .content {
    	&:after { right:0; left:auto; }
    	.sidebar, &:after { margin-left:0; margin-right:-100%; }
    }
    .page { float:left; }
    .sidebar { float: right; }

    .content.active {
        .sidebar, &:after { margin-right:0; }
    }
}
/*
Main logic to hide the sidebar is in ViewTemplate.jsp.
We may just hide the on/off toggle in css
*/
//.fav-hidden #menu {  .hide; }


.page-content, .sidebar {
	.clearfix;
	& > *:first-child { margin-top:0;}
	//& > h2, & > h3, & > h4,  { margin-top:0; }
}
.page-content {
    padding: @padding-base-horizontal;
}


/*
Section: page-footer

DOM Structure:
(start code)
	This page (revision-999) was last changed on
    a[href="/Diff.jsp?page=Main&amp;r1=634&amp;r2=633"] 17-May-2013 19:36
    by
    a.wikipage page-author
    a.feed[title='RSS feed for page Main'] &nbsp;
    a.caretup[href="#top"][title="Go to top"] &laquo;
(end)
*/
.page-footer {
	display:block;
	padding:.5em 0 0 0;
    background:@wiki-page-bg;
    text-align:right;
}

//reverse direction caret
.caret-up {
	.caret;
    border-top: 0;
    border-bottom: @caret-width-base solid;
    content: "";
}

